//数据渲染
function showData(pageNum) {
    $('tbody').html('')
    let showData = resultData.slice((pageNum - 1) * eachNum, pageNum * eachNum)
    showData.forEach(item => {
        $('tbody').append(`
        <tr>
          <th><input type="checkbox" class="checks" onclick='ischecks()'></th>
          <td>${item.jykh}</td>
          <td>${item.yhm}</td>
          <td>${item.jyts}</td>
          <td>${item.tsbh}</td>
          <td>${item.zz}</td>
          <td>${item.lb}</td>
          <td>${item.bq}</td>
          <td>${item.jyrq}</td>
          <td>${item.sfxj}</td>
          <td>${item.xjts}</td>
          <td>${item.yhrq}</td>
          <td>${item.sjhsrq}</td>
          <td>${item.cqts}</td>
          <td>${item.sfds}</td>
          <td>
            <span class="change" data-toggle="modal"
            data-target="#myModal" onclick='xiugaijy(this)'>编辑</span>
            <span>|</span>
            <span class='del' data-toggle="modal"
            data-target="#myModal" onclick='sureDel(this)'>删除</span>
          </td>
        </tr>
      `)
    })
}
//新增借阅弹框
function xinzengjy() {
    $('.modal-content').html(`
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增还书</h4>
      </div>
      <div class="modal-body clear">
        <div class="xzsr"><span>借阅卡号</span><input type="text"></div>
        <div class="xzsr"><span>用户名</span><input type="text"></div>
        <div class="xzsr"><span>还阅图书</span><input type="text"></div>
        <div class="xzsr"><span>图书编号</span><input type="text"></div>
        <div class="xzsr"><span>作者</span><input type="text" value=></div>
        <div class="xzsr"><span>类别</span>
          <select name="" id="lbselect" value=>
            <option value="" selected>综合性图书</option>
            <option value="">文学类图书</option>
            <option value="">教育类图书</option>
          </select>
        </div>
        <div class="xzsr"><span>标签</span>
          <select name="" id="bqselect" value=>
            <option value="" selected>综合类</option>
            <option value="">文学类</option>
            <option value="">教育类</option>
          </select>
        </div>  
        <div class="xzsr rqxz"><span>借阅日期</span><input type="date"></div>
        <div class="xzsr"><span>是否续借</span>
          <select name="" id="xjselect">
            <option value="" selected>是</option>
            <option value="">否</option>
          </select>
        </div>
        <div class="xzsr"><span>续借天数</span><input type="text"></div>
        <div class="xzsr rqxz"><span>应还书日期</span><input type="date"></div>
        <div class="xzsr rqxz"><span>实际还书日期</span><input type="date"></div>
        <div class="xzsr"><span>超期天数</span><input type="text"></div>
        <div class="xzsr"><span>是否丢失</span>
          <select name="" id="dsselect">
            <option value="">是</option>
            <option value="" selected>否</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addData()">确定</button>
      </div>`)
}
//新增借阅数据
function addData() {
    let add = new AddJyData()
    bookData.unshift(add)
    resultData = bookData
    goPage(nowPageNum)
    let allData = JSON.stringify(bookData)
    sessionStorage.setItem('initialData', allData)
}
//数据构造
function AddJyData() {
    this.jykh = $('.xzsr').eq(0).children().last().val()
    this.yhm = $('.xzsr').eq(1).children().last().val()
    this.jyts = $('.xzsr').eq(2).children().last().val()
    this.tsbh = $('.xzsr').eq(3).children().last().val()
    this.zz = $('.xzsr').eq(4).children().last().val()
    this.lb = $('#lbselect option:selected').text()
    this.bq = $('#bqselect option:selected').text()
    this.jyrq = $('.xzsr').eq(7).children().last().val()
    this.sfxj = $('#xjselect option:selected').text()
    this.xjts = $('.xzsr').eq(9).children().last().val()
    this.yhrq = $('.xzsr').eq(10).children().last().val()
    this.sjhsrq = $('.xzsr').eq(11).children().last().val()
    this.cqts = $('.xzsr').eq(12).children().last().val()
    this.sfds = $('#dsselect option:selected').text()
}
//编辑借阅弹框
function xiugaijy(obj) {
    let objval = $(obj).parent().siblings('td')
    $('.modal-content').html(`
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">修改借阅</h4>
      </div>
      <div class="modal-body">
        <div class="xzsr"><span>借阅卡号</span><input type="text" disabled value=${objval.eq(0).text()}></div>
        <div class="xzsr"><span>用户名</span><input type="text" value=${objval.eq(1).text()}></div>
        <div class="xzsr"><span>借阅图书</span><input type="text" value=${objval.eq(2).text()}></div>
        <div class="xzsr"><span>图书编号</span><input type="text" value=${objval.eq(3).text()}></div>
        <div class="xzsr"><span>作者</span><input type="text" value=${objval.eq(4).text()}></div>
        <div class="xzsr"><span>类别</span>
          <select name="" id="lbselect" value=>
            <option style="display:none" selected>${objval.eq(5).text()}</option>
            <option value="">综合性图书</option>
            <option value="">文学类图书</option>
            <option value="">教育类图书</option>
          </select>
        </div>
        <div class="xzsr"><span>标签</span>
          <select name="" id="bqselect" value=>
            <option style="display:none" selected>${objval.eq(6).text()}</option>
            <option value="">综合</option>
            <option value="">文学</option>
            <option value="">教育</option>
          </select>
        </div>
        <div class="xzsr rqxz"><span>借阅日期</span><input type="date" value=${objval.eq(7).text()}></div>
        <div class="xzsr"><span>是否续借</span>
          <select name="" id="xjselect" value=${objval.eq(8).text()}>
            <option style="display:none" selected>${objval.eq(8).text()}</option>
            <option value="">是</option>
            <option value="">否</option>
          </select>
        </div>
        <div class="xzsr"><span>续借天数</span><input type="text" value=${objval.eq(9).text()}></div>
        <div class="xzsr rqxz"><span>应还书日期</span><input type="date" value=${objval.eq(10).text()}></div>
        <div class="xzsr rqxz"><span>实际还书日期</span><input type="date" value=${objval.eq(11).text()}></div>
        <div class="xzsr"><span>超期天数</span><input type="text" value=${objval.eq(12).text()}></div>
        <div class="xzsr"><span>是否丢失</span>
          <select name="" id="dsselect">
            <option style="display:none" selected>${objval.eq(13).text()}</option>
            <option value="">是</option>
            <option value="">否</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="changeData()">确定</button>
      </div>`)
}
//修改借阅数据
function changeData() {
    for (let i = 0; i < bookData.length; i++) {
        if (bookData[i].jykh == $('.xzsr').eq(0).children().last().val()) {
            bookData[i].jykh = $('.xzsr').eq(0).children().last().val()
            bookData[i].yhm = $('.xzsr').eq(1).children().last().val()
            bookData[i].jyts = $('.xzsr').eq(2).children().last().val()
            bookData[i].tsbh = $('.xzsr').eq(3).children().last().val()
            bookData[i].zz = $('.xzsr').eq(4).children().last().val()
            bookData[i].lb = $('#lbselect option:selected').text()
            bookData[i].bq = $('#bqselect option:selected').text()
            bookData[i].jyrq = $('.xzsr').eq(7).children().last().val()
            bookData[i].sfxj = $('#xjselect option:selected').text()
            bookData[i].xjts = $('.xzsr').eq(9).children().last().val()
            bookData[i].yhrq = $('.xzsr').eq(10).children().last().val()
            bookData[i].sjhsrq = $('.xzsr').eq(11).children().last().val()
            bookData[i].cqts = $('.xzsr').eq(12).children().last().val()
            bookData[i].sfds = $('#dsselect option:selected').text()
        }
    }
    goPage(nowPageNum)
    let allData = JSON.stringify(bookData)
    sessionStorage.setItem('initialData', allData)
}
//确认删除弹框
function sureDel(obj) {
    let objval = $(obj).parent().siblings('td')
    let deljykh = objval.first().text()
    $('.modal-content').html(`
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">删除借阅</h4>
      </div>
      <div class="modal-body">
        <p>确认删除借阅卡号为：${deljykh}&nbsp的借阅数据吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="shanchujy(${deljykh})">确定</button>
      </div>`)
}
//删除借阅
function shanchujy(deldata) {
    for (let i = 0; i < bookData.length; i++) {
        if (bookData[i].jykh == deldata) {
            bookData.splice(i, 1)
        }
    }
    for (let j = 0; j < resultData.length; j++) {
        if (resultData[j].jykh == deldata) {
            resultData.splice(j, 1)
        }
    }
    if (maxPage > Math.ceil(resultData.length / eachNum)) {
        prePage()
    }
    maxPage = Math.ceil(resultData.length / eachNum)
    showPage(maxPage)
    goPage(nowPageNum)
    let allData = JSON.stringify(bookData)
    sessionStorage.setItem('initialData', allData)
}
//勾选框选中时改变批量删除按钮样式
function ischecks() {
    if ($('.checks').is(':checked')) {
        $('#piliangdel').css({
            'color': 'black'
        })
        $('#piliangdel').removeAttr('disabled')
    } else {
        $('#piliangdel').css(
            'color', 'rgb(209, 209, 209)'
        )
        $('#piliangdel').attr('disabled', "false")
    }
}
//批量删除确认弹框
function surePlDel() {
    $('.modal-content').html(`
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">删除借阅</h4>
      </div>
      <div class="modal-body">
        <p>确认删除选中的借阅数据吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="plshanchu()">确定</button>
      </div>`)
}
//批量删除
function plshanchu() {
    $('.checks').not('#biaotou').each(function () {
        if ($(this).is(':checked')) {
            let deldata = $(this).parent().next().text()
            for (let i = 0; i < bookData.length; i++) {
                if (bookData[i].jykh == deldata) {
                    bookData.splice(i, 1)
                }
            }
            for (let j = 0; j < resultData.length; j++) {
                if (resultData[j].jykh == deldata) {
                    resultData.splice(j, 1)
                }
            }
        }
    })
    if (maxPage > Math.ceil(resultData.length / eachNum)) {
        prePage()
    }
    maxPage = Math.ceil(resultData.length / eachNum)
    showPage(maxPage)
    goPage(nowPageNum)
    let allData = JSON.stringify(bookData)
    sessionStorage.setItem('initialData', allData)
}
//查询数据
function enquiryData() {
    if ($('#entext').val() != '') {
        resultData = []
        for (let i = 0; i < bookData.length; i++) {
            if (bookData[i].jykh.match($('#entext').val()) ||
                bookData[i].yhm.match($('#entext').val()) ||
                bookData[i].jyts.match($('#entext').val()) ||
                bookData[i].tsbh.match($('#entext').val())) {
                resultData.push(bookData[i])
            }
        }
    }
    nowPageNum = 1
    maxPage = Math.ceil(resultData.length / eachNum)
    showPage(maxPage)
    goPage(nowPageNum)
}